<%@ page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>君乐宝酸奶管理系统-销售统计</title>
<link rel="stylesheet" href="${ctx}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx}/css/my.css">
</head>
<body>
	<!-- 导航条 -->
	<jsp:include page="/mng/nav.jsp" />
	<!-- /导航条 -->

	<!-- 主容器 -->
	<div class="container" style="margin-top: 76px">
		<div class="row">
			<!-- 功能菜单 -->
			<jsp:include page="/mng/menu.jsp" />
			<!-- /功能菜单 -->

			<!-- 主界面 -->
			<div id="main" class="main col-md-9">
				<!-- 路径导航 -->
				<ol class="breadcrumb" style="border-radius: 0; background: #fff;">
					<li><a href="${ctx}/mng/main.jsp">首页</a></li>
					<li><a href="#">销售管理</a></li>
					<li class="active">出库统计报表</li>
				</ol>
				<!-- /路径导航 -->

				<!-- 柱状图 -->
				<div class="row" id="3dColumn" style="padding: 16px"></div>
				<!-- /柱状图 -->

				<!-- 饼图 -->
				<div class="row" id="3dPie" style="padding: 16px"></div>
				<!-- /饼图 -->

			</div>
			<!-- /主界面 -->
		</div>
	</div>
	<script src="${ctx}/js/jquery-1.11.1.min.js"></script>
	<script src="${ctx}/bootstrap3/js/bootstrap.min.js"></script>
	<script src="${ctx}/js/my.js"></script>
	<script src="${ctx}/Highcharts/js/highcharts.js"></script>
	<script type="text/javascript"
		src="${ctx}/Highcharts/js/highcharts-3d.js"></script>
	<script src="${ctx}/Highcharts/js/modules/exporting.js"></script>
	<script>
$(document).ready(function(){
	// Set up the chart
	var chart = new Highcharts.Chart({
		chart: {
			renderTo: '3dColumn',
			type: 'column',
			margin: 75,
			options3d: {
				enabled: true,
				alpha: 15,
				beta: 15,
				depth: 50,
				viewDistance: 25
			}
		},
		title: {
			text: '${year}年商品出库统计报表'
		},
		subtitle: {
			text: '每月商品出库总量统计'
		},
		plotOptions: {
			column: {
				depth: 25
			}
		},
		xAxis: {
			 categories : [${months}]
        },
        yAxis: {
        	title:{ text : "数量"}
        },
		series: [{
			name: '出库数量',
			data:[${datas}]
		}]
	});
	
	var chart2 = new Highcharts.Chart({
		chart: {
			renderTo: '3dPie',
			type: 'pie',
			options3d: {
				enabled: true,
				alpha: 45,
				beta: 0
			}
		},
		title: {
			text: '商品分类出库数量比例图'
		},
		tooltip: {
			pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
		},
		plotOptions: {
			pie: {
				allowPointSelect: true,
				cursor: 'pointer',
				depth: 35,
				dataLabels: {
					enabled: true,
					format: '{point.name}'
				}
			}
		},
		series: [{
			type: 'pie',
			name: '所占比例',
			data: [${datas2}]
		}]
	});
});
</script>
</body>
</html>